<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="shared-styles.html">

<dom-module id="build-card">
    <template>
        <style include="shared-styles"></style>
        <style is="custom-style">
            :host {
                display: block;
            }

            .item {
                display: flex;
                margin-top: 4px;
                margin-left: 6px;
                margin-right: 6px;
                cursor: pointer;
            }

            .item:hover {
                opacity: 0.5;
                transition: opacity 0.2s;
            }

            .commit {
                position: absolute;
                right: 0px;
                margin-top: 58px;
                margin-right: 8px;
                font-size: 0.8em;
                opacity: 0.50;
            }

            .message {
                text-align: left;
                position: absolute;
                left: 12px;
                right: 18px;
                margin-right: 20%; /* to make room for the author */
                margin-top: 4px;
                font-size: 0.90em;
                opacity: 0.85;
            }

            .author {
                right: 8px;
                position: absolute;
                margin-top: 8px;
                font-size: 0.8em;
            }

            .branch {
                left: 12px;
                position: absolute;
                margin-top: 58px;
                font-size: 0.8em;
                opacity: 0.50;
            }

            .elapsed {
                position: absolute;
                font-size: 0.8em;
                right: 6px;
                margin-top: 42px;
                opacity: 0.50;
            }

            .title {
                text-align: center;
                display: block;
            }

            .icon {
                max-width: 18px;
                max-height: 18px;
                color: var(--error-color);
            }

            .cancel {
                right: 2px;
                position: absolute;
            }

            .cloning {
            }

            .status {
                width: 6px;
                height: 76px;
                left: 0px;
            }

            .building {
                background-color: #2196F3;
            }

            .done {
                background-color: #4CAF50;
            }

            .cancelled {
                background-color: #FF9800;
            }

            .failed {
                background-color: #FF5722;
            }

            .cloning {
                background-color: #2196F3;
            }

            .queued {
                background-color: #FFCA28;
            }

            .progress-cloning {
                --paper-progress-active-color: #2196F3;
            }

            .progress-building {
                --paper-progress-active-color: #2196F3;
            }

            paper-tooltip {
                margin-top: -46px;
            }

            .progress {
                position: absolute;
                bottom: 0px;
                right: 8px;
                width: 56px;
            }

        </style>
        <paper-card id="card" class="item" elevation="1">
            <div class$="status {{_status(build)}}">
            </div>
            <div class="commit">
                [[build.commit]]
            </div>
            <div class="message">
                {{_messageOrScript(build)}}
            </div>
            <div class="author" style$="color: {{_authorColor(build)}}">
                [[build.author]]
            </div>
            <div class="branch">
                {{_displayName(build.config)}}
            </div>

            <div class="elapsed">
                <template is="dom-if" if="{{_showTime(build)}}">
                    [[elapsed]]
                </template>
                <template is="dom-if" if="{{!_showTime(build)}}">
                    {{_toLower(build.progress)}}
                </template>
            </div>

            <paper-tooltip for="card" position="bottom" animation-delay="0">
                {{_toLower(build.progress)}}
            </paper-tooltip>

            <template is="dom-if" if="{{_cancellable(build)}}">
                <div id="cancel" class="cancel">
                    <!-- hide the icon until stopping builds are supported. -->
                    <!--<iron-icon class="icon" icon="icons:close"></iron-icon>
                    <paper-tooltip for="cancel" position="bottom" animation-delay="0">
                        cancels the build
                    </paper-tooltip>-->
                </div>
            </template>

            <template is="dom-if" if="{{_inProgress(build)}}">
                <paper-progress indeterminate class$="progress slow {{_progress(build)}}"></paper-progress>
            </template>

        </paper-card>
    </template>
</dom-module>
<script>
    class BuildCard extends Polymer.Element {

        static get is() {
            return 'build-card';
        }

        ready() {
            super.ready();

            setInterval(() => {
                if (this.build.end > 0) {
                    this.elapsed = this._time(this.build.start, this.build.end);
                } else {
                    this.elapsed = this._time(this.build.start, new Date().getTime());
                }
            }, 1000);
        }

        _authorColor(build) {
            let author = build.author;
            let deg = 0;

            for (let i in author) {
                deg += author.charCodeAt(i);
            }
            let hue = deg % 360;
            return "hsla(" + hue + ",50%, 50%, 0.8)";
        }

        _cancellable(build) {
            let progress = build.progress;
            return (progress === 'CLONING' || progress === 'BUILDING' || progress === 'QUEUED');
        }

        _inProgress(build) {
            return (build.progress === 'CLONING' || build.progress === 'BUILDING');
        }

        _isCloning(build) {
            return (build.progress === 'CLONING');
        }

        _showTime(build) {
            return !(build.progress === 'QUEUED') && !(build.progress === 'CLONING');
        }

        _progress(build) {
            return 'progress-' + build.progress.toLowerCase();
        }

        _toLower(string) {
            return string.toLowerCase();
        }

        _displayName(config) {
            if (config.branch === '') {
                return config.repositoryName;
            } else {
                return config.repositoryName + '@' + config.branch;
            }
        }

        _messageOrScript(build) {
            if (build.config.branch === '') {
                return build.config.cmdLine.substring(0, Math.min(64, build.config.cmdLine.length));
            } else {
                return build.message;
            }
        }

        _trimRepo(string) {
            let parts = string.split('/');
            return parts[parts.length - 1];
        }

        _time(epoch, now) {
            let seconds = (now - epoch) / 1000;

            let minutes = Math.trunc(seconds / 60);
            seconds = Math.trunc(seconds % 60);

            return this._leftPad(minutes) + ':' + this._leftPad(seconds);
        }

        _leftPad(int) {
            if (int < 10) {
                return '0' + int;
            } else {
                return int;
            }
        }

        _status(build) {
            return build.progress.toLowerCase();
        }
    }

    window.customElements.define(BuildCard.is, BuildCard);
</script>
